<template>
  <div class="lmain">
    <h1 style="margin-top: 60%;color:white">患者肺部自检系统</h1>
    <div v-if="type == 0" style="margin-top: 40px">
      <van-form ref="zform" @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="form.username" name="username" label="用户名" placeholder="请填写用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="请填写密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
          <div @click="type = 1" style="display: flex;justify-content: flex-end;margin-top: 40px;margin-right:10px">去注册
          </div>
        </div>
      </van-form>
    </div>
    <div v-else style="margin-top: 40px">
      <van-form ref="xform" @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="rform.username" name="username" label="用户名" placeholder="请填写用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="rform.password" type="password" name="password" label="密码" placeholder="请填写密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
          <div @click="type = 0" style="display: flex;justify-content: flex-end;margin-top: 40px;margin-right:10px">去登录
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { useUserStore } from "@/store/useUserStore";
import { showNotify } from "vant";
import { useRouter } from "vue-router";
import { register } from "@/api/index"
const type = ref(0)
const router = useRouter();
const userStore = useUserStore();
const { Rlogin } = userStore;
const { proxy } = getCurrentInstance() as any;

const form = ref<any>({
  username: "",
  password: "",
});

const rform = ref<any>({
  username: "",
  password: "",
});
const onSubmit = () => {

  if (type.value == 1) {
    proxy.$refs.xform
      .validate()
      .then(() => {
        register(form.value)
          .then((res: any) => {
            if (res.code == 200) {
              showNotify({ type: "success", message: res.msg });
              type.value = 0
            }
          })
          .catch((err) => {
            console.log(err);
            showNotify({ type: "warning", message: err });
          });
      })
      .catch((err: any) => {
        console.log(err);
        showNotify({ type: "warning", message: err });
      });
  } else {
    proxy.$refs.zform
      .validate()
      .then(() => {
        Rlogin(form.value)
          .then((res: any) => {
            if (res.code == 200) {
              showNotify({ type: "success", message: res.msg });
              router.push("/home");
            }
          })
          .catch((err) => {
            console.log(err);
            showNotify({ type: "warning", message: err });
          });
      })
      .catch((err: any) => {
        console.log(err);
        showNotify({ type: "warning", message: err });
      });
  }


};
</script>

<style lang="scss" scoped>
.lmain {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url('../assets//images/bg.jpg') no-repeat;
  background-size: 100% 100%;
  color: white;
}
</style>
